<template>
  <!-- 侧边栏 -->
  <el-aside
    :width="sidebarCollapsed ? '64px' : '210px'"
    class="sidebar"
    :class="{ 'sidebar-collapsed': sidebarCollapsed }"
  >
    <div class="sidebar-header">
      <!-- 折叠状态下只显示logo -->
      <div v-if="sidebarCollapsed" class="logo-only">
        <span class="logo-icon">{{ systemLogo }}</span>
      </div>
      <!-- 展开状态下显示带文字的logo -->
      <div v-else class="logo-with-text">
        <span class="logo-icon">{{ systemLogo }}</span>
        <h2>{{ systemTitle }}</h2>
      </div>
    </div>

    <!-- 侧边栏菜单 - 根据角色动态生成 -->
    <el-menu
      :default-active="activeMenu"
      class="sidebar-menu"
      router
      background-color="#f8f8f8"
      text-color="#333"
      active-text-color="#000000"
      unique-opened
      :collapse="sidebarCollapsed"
      :collapse-transition="false"
      @select="handleSelect"
    >
      <el-menu-item
        v-for="menu in menuItems"
        :key="menu.path"
        :index="`${currentRoutePath}/${menu.path}`"
        class="menu-item"
        :class="{
          'is-active': activeMenu === `${currentRoutePath}/${menu.path}`
        }"
      >
        <i :class="[menu.meta.icon, 'menu-icon']"></i>
        <span slot="title">{{ menu.meta.title }}</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
import router from '../router/index.js'

export default {
  name: 'NavView',
  props: {
    // 从父组件接收侧边栏折叠状态
    sidebarCollapsed: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    activeMenu() {
      return this.$route.path
    },
    currentRoutePath() {
      // 根据用户角色确定当前的基础路由路径
      const userInfoStr = localStorage.getItem('userInfo')
      const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null
      const userRole = userInfo?.role || 'admin' // 默认使用admin
      return userRole === 'admin' ? '/admin' : '/user'
    },
    menuItems() {
      // 获取当前用户角色（从localStorage中获取）
      const userInfoStr = localStorage.getItem('userInfo')
      const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null
      const userRole = userInfo?.role || 'admin' // 默认使用admin

      // 根据角色确定要获取的路由路径
      const routePath = userRole === 'admin' ? '/admin' : '/user'

      // 获取对应角色的路由子路由作为菜单数据
      const roleRoute = router.options.routes.find(
        (route) => route.path === routePath
      )

      if (roleRoute && roleRoute.children) {
        // 过滤掉没有meta信息的路由
        return roleRoute.children.filter((route) => route.meta)
      }
      return []
    },
    // 获取当前用户角色的系统标题
    systemTitle() {
      const userInfoStr = localStorage.getItem('userInfo')
      const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null
      const role = userInfo?.role
      return role?.includes('admin') ? '智能图书推荐系统' : '个性化阅读空间'
    },
    systemLogo() {
      const userInfoStr = localStorage.getItem('userInfo')
      const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null
      const role = userInfo?.role
      return role?.includes('admin') ? '📚' : '🧠'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log('选中菜单项:', key, keyPath)
      // 可以在这里添加菜单项选中后的逻辑
    }
  }
}
</script>
<style scoped>
/* 侧边栏样式 */
.sidebar {
  background-color: #f8f8f8;
  height: 100vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.3s ease;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
}

/* 侧边栏头部样式 */
.sidebar-header {
  background-color: #f8f8f8;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  transition: all 0.3s ease;
  min-width: 85%;
  margin: 0 auto;
}

/* 只显示logo的状态 */
.logo-only {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 显示logo和文字的状态 */
.logo-with-text {
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 15px;
}

/* Logo图标样式 */
.logo-icon {
  font-size: 20px;
  margin-right: 10px;
}

/* 文字样式 */
.sidebar-header h2 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  padding: 0;
  transition: all 0.3s ease;
}

/* 侧边栏菜单样式 */
.sidebar-menu {
  border-right: none;
  height: calc(100vh - 60px);
  background-color: #f8f8f8;
}

/* 菜单项样式 */
.menu-item {
  padding: 0;
  transition: all 0.3s;
  width: 85%;
  margin: 0 auto;
  height: 45px;
  line-height: 45px;
}

.sidebar-menu .menu-item .el-menu-item {
  padding-left: 15px !important;
  height: 50px;
  line-height: 50px;
  transition: all 0.3s ease;
  color: #333;
  border-right: 3px solid transparent;
}

/* 菜单项悬浮样式 */
.sidebar-menu .menu-item:hover {
  background-color: #f2f2f2 !important;
  color: #000 !important;
  border-radius: 10px;
  font-weight: 500;
  border-right: none;
}
/* 菜单项激活样式 */
.sidebar-menu .menu-item.is-active {
  background-color: #f2f2f2 !important;
  color: #000 !important;
  border-radius: 10px;
  font-weight: 500;
  border-right: none;
}

/* 折叠状态下的激活样式调整 */
.sidebar-collapsed .sidebar-menu .menu-item.is-active .el-menu-item {
  padding-left: 0 !important;
  margin: 0 5px !important;
  border-radius: 8px;
}

/* 菜单图标样式 */
.menu-icon {
  margin-right: 12px;
  font-size: 16px;
}

/* 折叠状态下的样式 */
.sidebar-collapsed .sidebar-menu .menu-item .el-menu-item {
  padding-left: 0 !important;
  text-align: center;
}

.sidebar-collapsed .sidebar-menu .menu-item .menu-icon {
  margin-right: 0;
}

/* 滚动条样式 */
.sidebar::-webkit-scrollbar {
  display: none;
}

/* 确保在折叠状态下图标居中 */
.sidebar-collapsed .el-menu-item__title {
  display: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .sidebar {
    width: 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1001;
    transition: width 0.3s ease;
  }

  .sidebar.sidebar-show {
    width: 210px;
  }
}
</style>
